<template>
  <view
    class="grid"
    :id="guide_option.order_grid_guide.id"
    :data-guide-text="guide_option.order_grid_guide.dataGuideText"
  >
    <u-cell
      title="全部订单"
      isLink
      @click="
        handleNavigate({
          imageUrl:
            'https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/3384/20230131/1c6d8f2f-72e8-4a88-b119-72bc9ea7e153.png',
          text: '待支付',
          isHot: false,
          navigateType: NAVIGATE_TYPE.SELF,
          path: 'pages/sp-order/pages/orderList/index?active=',
          url: '',
          serviceChatUrl: '',
          serviceChatID: '',
        })
      "
    />
    <u-grid :border="false" :col="attribute.col">
      <u-grid-item
        v-for="(listItem, listIndex) in attribute.list"
        :key="listIndex"
        @click="handleNavigate(listItem)"
      >
        <view class="grid-item">
          <image
            v-if="listItem.imageUrl"
            :src="listItem.imageUrl"
            :style="{ 'border-radius': '10rpx' }"
            class="grid-image"
            :class="[`grid-${type}-image`]"
          />
          <view
            v-else
            class="empty-area"
            :style="{ 'border-radius': '10rpx' }"
            :class="[`grid-${type}-image`]"
          />

          <view class="grid-text" v-if="type === GIRD_TYPE.IMAGE_AND_TEXT">{{
            listItem.text
          }}</view>
          <div class="red-dot" v-if="listItem.isShowHot"></div>
        </view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
import { GRID_OPTION } from "@/pages/home/const";
import { callNavigateHook } from "@/utils/tool";
import { NAVIGATE_TYPE } from "@/const/widget";

const GIRD_TYPE = {
  //imageAndText-图文布局，image-单图片布局
  IMAGE_AND_TEXT: "imageAndText",
  IMAGE: "image",
};
export default {
  name: `grid`,
  props: {
    attribute: {
      type: Object,
      default: () => ({
        list: [],
        col: 4,
      }),
    },
    guide_option: Object,
  },
  data() {
    return {
      NAVIGATE_TYPE,
      GRID_OPTION,
      type: GIRD_TYPE.IMAGE_AND_TEXT,
      GIRD_TYPE,
      customerStyle: {
        borderRadius: 0,
      },
    };
  },
  methods: {
    handleNavigate(listItem) {
      if (listItem.navigateType) {
        callNavigateHook({
          type: listItem.navigateType,
          target: listItem,
        });
      } else {
        this.$emit("event", {
          eventName: "gridClick",
          attribute: listItem,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.grid {
  background-color: white;
  padding: 10rpx;
  width: calc(686rpx - 20rpx);
  margin: 20rpx auto;
  border-radius: 24rpx;
  .grid-item {
    padding: 34rpx 0;
    text-align: center;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    position: relative;
    float: left;
  }
  .grid-text {
    box-sizing: border-box;
    padding-top: 19rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #555555;
  }

  .grid-imageAndText-image {
    width: 55rpx;
    height: 54rpx;
  }
  .red-dot {
    position: absolute;
    width: 10rpx;
    height: 10rpx;
    border-radius: 999rpx;
    background-color: red;
    top: 20rpx;
    right: 20rpx;
  }

  .empty-area {
    background-color: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #333;
  }

  .grid-image-image {
    width: 80rpx;
    height: 80rpx;
  }
}
</style>
